<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" show-fullscreen destroy-on-close width="880px" @close="close">
		<el-form ref="formRef" label-width="100px" :model="formData" :rules="rules">
			<el-form-item label="模板名称" prop="templateName">
				<el-input
					v-model.trim="formData.templateName"
					placeholder="模板名称"
					:maxlength="64"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="工艺类型" prop="procTypeCode">
						<el-select v-model="formData.procTypeCode" class="m-2" placeholder="请选择工艺类型">
							<el-option
								v-for="item in procTypeOptions"
								:key="item.code"
								:label="item.name"
								:value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否默认" prop="isDefault">
						<el-switch v-model="formData.isDefault" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="返工项" prop="subjects">
				<sc-form-table
					ref="table"
					v-model="formData.subjects"
					:addTemplate="addSubjectTemplate"
					placeholder="暂无数据">
					<el-table-column prop="badCode" label="不良代码" width="240">
						<template #default="scope">
							<el-input
								v-model.trim="scope.row.badCode"
								placeholder="请输入返工项内容"
								:maxlength="32"
								show-word-limit
								clearable />
						</template>
					</el-table-column>
					<el-table-column prop="standard" label="不良内容">
						<template #default="scope">
							<el-input
								v-model.trim="scope.row.badContent"
								placeholder="请输入返工项标准"
								:maxlength="128"
								show-word-limit
								clearable />
						</template>
					</el-table-column>
				</sc-form-table>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>

export default {
	emits: ['complete'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			isSaveing: false,
			visible: false,
			procTypeOptions: [],
			addSubjectTemplate: {
				badCode: '',
				badContent: '',
			},
			formData: {
				id: 0,
				templateName: '',
				procTypeCode: '',
				procTypeName: '',
				isDefault: false,
				subjects: [],
			},
			rules: {
				templateName: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
				procTypeCode: [{ required: true, message: "请选择工艺类型", trigger: "blur" }],
				subjects: [{ required: true, message: "请输入返工项", trigger: "blur" }],
			},
		};
	},
	methods: {
		async open(row) {
			if (!row) {
				this.mode = "add";
			} else {
				this.mode = "edit";
				const resp = await this.$API.reworktemplate.model.get(row.id);
				this.formData = resp.data;
				this.formData.subjects = this.formData.subjects.map(s => ({ id: s.id, badCode: s.badCode, badContent: s.badContent }));
			}

			const resp2 = await this.$API.syscodetype.bycode.get('mes_process_type');
			this.procTypeOptions = resp2.data.codes.map(s => ({ name: s.name, code: s.codeValues }));

			this.visible = true;
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					const option = this.procTypeOptions.find(s => s.code === this.formData.procTypeCode);
					this.formData.procTypeName = option.name;
					this.formData.subjects = this.formData.subjects.map(s => ({ id: s.id, badCode: s.badCode, badContent: s.badContent }));

					let resp = null;
					if (this.formData.id === 0) {
						resp = await this.$API.reworktemplate.add.post(this.formData);
					} else {
						resp = await this.$API.reworktemplate.update.put(this.formData);
					}
					this.isSaveing = false;
					if (resp.code == 200) {
						this.$emit("complete");
						this.visible = false;
						this.$message.success("保存成功");
					} else {
						this.$alert(resp.message, "提示", { type: "error" });
					}
				}
			});
		},
		close() {
			this.formData = {
				id: 0,
				templateName: '',
				procTypeCode: '',
				procTypeName: '',
				isDefault: false,
				subjects: [],
			};
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
